<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryForm" :inline="true">
        <!-- StartDate  EndDate -->
        <el-form-item prop="startTime">
          <el-date-picker
            v-model="queryForm.startTime"
            type="date"
            placeholder="请选择开始时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item prop="endTime">
          <el-date-picker
            v-model="queryForm.endTime"
            type="date"
            placeholder="请选择结束时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item prop="warningType">
          <el-select v-model="queryForm.warningType" placeholder="请选择预警类型" clearable>
            <el-option v-for="item in warningTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="keywords">
          <el-input v-model="queryForm.keywords" placeholder="请输入关键字" clearable style="width: 200px" />
          <el-button type="primary" style="margin-left: 0; border-radius: 0" @click="handleQuery"> 搜索 </el-button>
          <el-button type="primary" style="margin-left: 10px; border-radius: 0" @click="handleQuery">
            导出查询结果
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-row :gutter="20">
        <el-col :span="24" :offset="0" style="margin-top: 10px">
          <el-table
            ref="tableRef"
            v-loading="loading"
            :data="tableData"
            style="width: 100%"
            :show-overflow-tooltip="{ effect: 'light' }"
          >
            <el-table-column align="left" label="项目名称" prop="projectName" min-width="160" />
            <el-table-column align="left" label="施工总承包单位" prop="corpName" min-width="160" />
            <el-table-column align="left" label="预警类型" prop="warningTypeName" min-width="120" />
            <el-table-column align="left" label="预警内容" prop="remark" min-width="500" />
            <el-table-column align="left" label="预警时间" prop="createTime" min-width="120" />
          </el-table>
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryForm.pageNum"
            v-model:limit="queryForm.pageSize"
            @pagination="handleQuery"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { QuerySysEarlyWarning } from "@/api/admin/earlywarning/index";
import { QueryForm } from "@/api/admin/earlywarning/types";
import { downloadFile } from "@/utils";
import { getDicts } from "@/store/modules/dict";
import moment from "moment";
const loading = ref(false);
const tableData = ref();
const areaoptions = getDicts("areaTrees").filter((item: { value: number }) => item.value === 540000);
const tableRef = ref();

const warningTypes = getDicts("warningType");

/**
 * 禁用日期
 */
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

//查询条件
const queryForm = reactive<QueryForm>({});
const total = ref(0);
//城市联动赋值
const handleCascaderChange = (value: any) => {
  if (value.length == 3) {
    queryForm.provinceCode = value[0];
    queryForm.cityCode = value[1];
    queryForm.areaCode = value[2];
  }
  // 在这里可以对选中的值进行进一步处理
};

//这是列表数据
const handleQuery = function () {
  loading.value = true;
  QuerySysEarlyWarning(queryForm)
    .then((res) => {
      if (res.type === 0) {
        if (res.success) {
          tableData.value = res.data.list;
          queryForm.pageNum = res.data.pageNum;
          queryForm.pageSize = res.data.pageSize;
          total.value = res.data.total;
        } else {
        }
      } else {
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
:deep(.el-button) {
  margin-left: 5px;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
}
:deep(.el-form--inline .el-form-item) {
  margin-right: 5px;
}
</style>
